<template>
    <div class="FormCustomEditControl">

        <div v-if="!item.config || isDesign"
             class="bodyDivClass"
             v-bind:class="{ active: item.active, main: item.main }"
        >
          <span v-if="item.defConf=='chartBoard'" style="margin-left: 10px">{{i18n('chartBoard','图表看板')}}</span>
          <span v-if="item.defConf=='myChartBoard'" style="margin-left: 10px">{{i18n('myChartBoard','我的图表看板')}}</span>
            <span v-else style="margin-left: 10px">{{getLanguageName(item.config.name)}}</span>
            <div v-for="item_ in editImgList">
                <div class="editImg" v-if="item.defConf==item_.key">
                    <img :src="item_.bigValue"/>
                </div>
            </div>
        </div>
        <!--图表-->
        <div style="height: 100%;width: 100%;position: relative" v-else-if="item.defConf=='chart'">
            <chart-view :config="item.config" :layoutItem="item"></chart-view>
            <div class="conceal"></div>
        </div>
        <!--Tab-->
        <div style="height: 100%;width: 100%;position: relative" v-else-if="item.defConf=='tab'">
            <layout-tab :ref="item.config.alias" v-if="item.defConf=='tab'" :layoutItem="item"
                        :config="item.config"></layout-tab>
            <div class="conceal"></div>
        </div>
        <!-- 列表 ，form,tree-->
        <div style="height: 100%;width: 100%;position: relative"
             v-else-if="item.defConf=='list' || item.defConf=='form' || item.defConf=='tree'">
            <component  :ref="item.config.alias" v-bind:is="item.config.component" :layoutItem="item"
                        :config="item.config"></component>
            <div class="conceal"></div>
        </div>
        <!--ureport报表-->
        <div style="height: 100%;width: 100%;position: relative" v-else-if="item.defConf=='ureport'">
            <ureport-view :config="item.config" :layoutItem="item"></ureport-view>
            <div class="conceal"></div>
        </div>
        <!--栏目-->
        <div style="height: 100%;width: 100%;position: relative" v-else-if="item.defConf=='column'">
            <column-view :config="item.config" ></column-view>
            <div class="conceal"></div>
        </div>
        <!--自定义组件-->
        <div style="height: 100%;width: 100%;position: relative" v-else-if="item.defConf=='custom'">
            <custom-view :config="item.config" :layoutItem="item"></custom-view>
            <div class="conceal"></div>
        </div>
        <!--日历组件-->
        <div style="height: 100%;width: 100%;position: relative" v-else-if="item.defConf=='calendar'">
            <calendar-view :config="item.config" :layoutItem="item"></calendar-view>
            <div class="conceal"></div>
        </div>
        <!--自定义页面栏目-->
        <div style="height: 100%;width: 100%;position: relative" v-else-if="item.defConf=='customColumn'">
            <custom-page-show :config="item.config" type="pc"></custom-page-show>
            <div class="conceal"></div>
        </div>
        <!--筛选器组件-->
        <div style="height: 100%;width: 100%;position: relative" v-else-if="item.defConf=='filter'">
            <filter-component-view :config="item.config" :isMobile="isMobile" :layoutItem="item"></filter-component-view>
            <div class="conceal"></div>
        </div>
        <!--富文本组件-->
        <div style="height: 100%;width: 100%;position: relative" v-else-if="item.defConf=='quillEditor'">
            <quill-editor-view :config="item.config" :read-only="true"></quill-editor-view>
            <div class="conceal"></div>
        </div>
        <!--轮播图组件-->
        <div style="height: 100%;width: 100%;position: relative" v-else-if="item.defConf=='carousel'">
            <carousel-view :config="item.config"></carousel-view>
            <div class="conceal"></div>
        </div>
        <!--Tab容器-->
        <div style="height: 100%;width: 100%;position: relative" v-else-if="item.defConf=='tabContainer'">
            <tab-container-view
                :config="item.config"
                :ref="item.config.name"
                :layoutItem="item"
                :editImgList="editImgList"
            ></tab-container-view>
            <div class="conceal"></div>
        </div>
        <component v-else :ref="item.config.alias" :is="item.config.component" :layoutItem="item"
                   :config="item.config"></component>
    </div>
</template>

<script>
import ChartDef from './formComponent/ChartDef.vue'
import layoutTab from './formCustomLayout/LayoutTab.vue'
import UreportView from './formComponent/UreportView.vue'
import ColumnView from './formComponent/ColumnView.vue';
import CustomView from './formComponent/CustomView.vue';
import CalendarView from './formComponent/CalendarView.vue';
import CustomPageShow from "@/views/modules/portal/core/CustomPageShow";
import FilterComponentView from './formComponent/FilterComponentView.vue';
import QuillEditorView from "./formComponent/QuillEditorView";
import CarouselView from './formComponent/CarouselView.vue';
import ChartView from './formComponent/ChartView.vue'
import FormComponent from "@/views/modules/form/core/formComponent/FormComponent";
import ListComponent from "@/views/modules/form/core/formComponent/ListComponent";
import TreeComponent from "@/views/modules/form/core/formComponent/TreeCompoment";
import BpmComponent from './formComponent/BpmComponent.vue'
import TabContainerView from './formComponent/TabContainerView.vue';
export default {
    name: "FormCustomEditControl",
    props:['item','isMobile',"editImgList","readonly","isDesign"],
    components: {
        ChartDef,
        layoutTab,
        UreportView,
        ColumnView,
        CustomView,
        CalendarView,
        CustomPageShow,
        FilterComponentView,
        QuillEditorView,
        CarouselView,
        ChartView,
        FormComponent,
        ListComponent,
        TreeComponent,
        BpmComponent,
        TabContainerView
    },
    data(){
        return{
        }
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "formCustom", key);
        },
        getLanguageName(obj){
            if(Object.prototype.toString.call(obj) === "[object Object]" && obj.hasOwnProperty('zh-CN')){
                let lang = localStorage.getItem('language')
                return obj[lang]
            }else if(typeof obj === "string" && obj.includes('{') && obj.includes('}')){
                try {
                    let o = new Function(`return ${obj}`)() ;
                    return this.getLanguageName(o)
                }catch (e) {
                    return obj
                }
            }else {
                return obj ;
            }
        }
    }
}
</script>

<style scoped>
.FormCustomEditControl{
    height: 100%;
    width: 100%;
    background: white;
}
.bodyDivClass {
    flex: 1;
    position: relative;
    bottom: -2px;
    height: 100%;
    background-color: #fff;
    cursor: default;
}
.bodyDivClass .itmelist {
    display: flex;
    align-items: center;
}
.bodyDivClass > ul {
    padding: 0 10px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 1px;
    overflow: auto;
}
.editImg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.editImg img {
    width: 100%;
}
</style>